<template>
  <div class="app-container">

    
    <el-form :model="queryParams" ref="queryRef" :inline="true">
      <div class="flex input-height">
        <div class="label">时间：</div>
        <div class="align-center">
          <el-radio-group v-model="cycleRadio" @change="bindchangeDate" class="margin-right">
            <el-radio-button label="month">本月</el-radio-button>
            <el-radio-button label="season">本季</el-radio-button>
            <el-radio-button label="year">本年</el-radio-button>
          </el-radio-group>
          <el-date-picker style="margin-right:8px" v-model="dateSection" type="daterange" range-separator="至" start-placeholder="开始时间" end-placeholder="结束时间"
            @change="bindChangeAllDate" />
        </div>
        <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
        <el-button icon="Refresh" @click="resetQuery">重置</el-button>
      </div>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button type="primary" plain icon="Plus" @click="handleAdd" v-hasPermi="['system:role:add']">新增</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button type="success" plain icon="Edit" :disabled="single" @click="handleUpdate" v-hasPermi="['system:role:edit']">修改</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button type="danger" plain icon="Delete" :disabled="multiple" @click="handleDelete" v-hasPermi="['system:role:remove']">删除</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button type="warning" plain icon="Download" @click="handleExport" v-hasPermi="['system:role:export']">导出</el-button>
      </el-col>
      <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
    </el-row>

    <Custable :loading="loading" :content="goOutContent" :list="tableData" :queryParams="queryParams" :total="total" @getList="getList">
      <template #operation="scope">
        <el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)" v-hasPermi="['audit:stat_ycbq:edit']">修改</el-button>
        <el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)" v-hasPermi="['audit:stat_ycbq:remove']">删除</el-button>
      </template>
    </Custable>

    <Mask v-if="dialogVisible" :dialogVisible="dialogVisible" @handleClose="handleClose" :queryParams="queryParams" :rowDetails="rowDetails"
      :formItemConfig="formItemConfig" />

  </div>
</template>
  
  
  <script setup>
import moment from 'moment'
import { listCyxxhz, getCyxxhz, delCyxxhz, } from "@/api/charge/cyxxhz";
import { listYdzfxbg, getYdzfxbg, delYdzfxbg } from "@/api/charge/ydzfxbg";
import { listTxfzszxjhyb, getTxfzszxjhyb, delTxfzszxjhyb } from "@/api/charge/txfzszxjhyb";
import useUserStore from '@/store/modules/user'
import Custable from "@/components/Custom/Custable";
import Mask from "./components/Mask";
import config from "./config"
import { ref } from 'vue';

const { proxy } = getCurrentInstance()
const userStore = useUserStore()
const queryParams = ref({ "startDate": '', "endDate": '', pageNum: 1, pageSize: 10 })

const cycleRadio = ref('month')
const dialogVisible = ref(false)
const goOutContent = ref(config.goOutContent1)
const formItemConfig = ref(config.formItemConfig1)
const loading = ref(false)
const deptOptions = ref([])
const tableData = ref([])
const total = ref(0)
const rowDetails = ref({})
const dateSection = ref([])
const radioIndex = ref(0)
const methods = ref({ listCyxxhz, delYdzfxbg, listYdzfxbg, delTxfzszxjhyb, listTxfzszxjhyb, delCyxxhz })




/** 查询列表 */
function getList(abutment) {
  loading.value = true;
  methods.value[abutment](queryParams.value).then(response => {
    tableData.value = response.rows;
    total.value = response.total;
    loading.value = false;
  });
}

/** 删除按钮操作 */
function handleDelete(row) {
  const _ids = row.id || ids.value;
  proxy.$modal.confirm('是否确认删除该列编号为"' + _ids + '"的数据项？').then(function () {
    return methods.value['del' + carTypeList.value[radioIndex.value].interface](_ids);
  }).then(() => {
    getList('list' + carTypeList.value[radioIndex.value].interface);
    proxy.$modal.msgSuccess("删除成功");
  }).catch(() => { });
}

/** 导出按钮操作 */
function handleExport() {
  proxy.download('audit/stat_ycbq/export', {
    ...queryParams.value
  }, `收费运营分析_${new Date().getTime()}.xlsx`)
}
const bindChangeAllDate=(val)=>{
  
  dateSection.value=[moment(val[0]).format("YYYY-MM-DD"),moment(val[1]).format("YYYY-MM-DD")]
  queryParams.value.startDate = dateSection.value[0];
  queryParams.value.endDate = dateSection.value[1];
}
/** 搜索按钮操作 */
function handleQuery() {
  getList('list' + carTypeList.value[radioIndex.value].interface)
};
/** 重置按钮操作 */
function resetQuery() {
  queryParams.value = { pageNum: 1, pageSize: 10 };
  cycleRadio.value = "day";
  proxy.resetForm("queryRef");
  init()
  handleQuery();
};
const handleAdd = () => {
  rowDetails.value={}
  dialogVisible.value = true;
}
const handleUpdate = (data) => {
  dialogVisible.value = true;
  rowDetails.value = data;
}

const handleClose = () => {
  dialogVisible.value = false;
  getList('list' + carTypeList.value[radioIndex.value].interface)
}
const bindchangeDate = (val) => {
  let date = new Date();
  let year = date.getFullYear();
  let params = {}
  if (val == 'day') {
    params.startDate = moment().format("YYYY-MM-DD")
    params.endDate = moment().format("YYYY-MM-DD");
  } else if (val == 'week') {
    params.startDate = moment().startOf('week').format('YYYY-MM-DD');
    params.endDate = moment().endOf('week').format('YYYY-MM-DD')
  } else if (val == 'month') {
    params.startDate = moment().startOf('month').format('YYYY-MM-DD');
    params.endDate = moment().endOf('month').format('YYYY-MM-DD')
  } else if (val == 'season') {
    let startQuarter = moment(moment().quarter(moment().quarter()).startOf('quarter').valueOf()).format('YYYY-MM-DD');
    let endQuarter = moment(moment().quarter(moment().quarter()).endOf('quarter').valueOf()).format('YYYY-MM-DD');
    params.startDate = startQuarter
    params.endDate = endQuarter
  } else {
    params.startDate = year + '-01-01'
    params.endDate = year + '-12-31'
  }
  dateSection.value = [moment(params.startDate).format("YYYY-MM-DD"), moment(params.endDate).format("YYYY-MM-DD")]
  queryParams.value = { ...queryParams.value, ...params }; getList('list' + carTypeList.value[radioIndex.value].interface)


}

const init = () => {
  let startDate = moment().startOf('month').format('YYYY-MM-DD');
  let endDate = moment().endOf('month').format('YYYY-MM-DD')
  dateSection.value = [startDate, endDate]
  queryParams.value.startDate = startDate;
  queryParams.value.endDate = endDate;
}
const getDeptId = () => {
  userStore.getInfo().then(res => {
    if (res.code == 200) {
      if(res.user.dept.deptId!=101){
        config.goOutContent1.length>=5?config.goOutContent1.splice(1,1):"";
        config.goOutContent2.length>=5?config.goOutContent2.splice(1,1):"";
        config.goOutContent3.length>=5?config.goOutContent3.splice(1,1):"";
      }
      getList('listCyxxhz')
    }

  })
}
getDeptId()
init()

  </script>
  
  <style scoped>
.flex {
  display: flex;
  align-items: center;
  margin-bottom: 12px;
}

.flex .label {
  color: #333;
  font-size: 14px;
}

/deep/.padding .el-radio-button--large .el-radio-button__inner {
  padding: 8px 19px;
}
/deep/ .custom-tag .el-radio-button--large .el-radio-button__inner {
  min-width: 60px;
  height: 32px;
  line-height: 32px;
  margin: 0 4px 0;
  padding: 0 10px;
  border: 1px solid #e4e4e4;
  font-size: 14px;
}
/deep/ .custom-tag .el-radio-button--large.is-active .el-radio-button__inner {
  background: #fff;
  border: 1px solid #246BCC;
  color: #246BCC;
  position: relative;
}

/deep/
  .custom-tag
  .el-radio-button--large.is-active
  .el-radio-button__inner:after {
  content: "";
  position: absolute;
  top: 0px;
  right: 0px;
  border-top: 20px solid #246BCC;
  border-left: 20px solid transparent;
}
/deep/
  .custom-tag
  .el-radio-button--large.is-active
  .el-radio-button__inner:before {
  content: "";
  position: absolute;
  width: 5px;
  height: 6px;
  background: transparent;
  top: 2px;
  right: 4px;
  border: 1px solid white;
  border-top: none;
  border-right: none;
  transform: rotate(-55deg);
  z-index: 9;
}

.margin-right {
  margin-right: 8px;
}
/deep/ .input-height .el-input__wrapper {
  height: 32px;
}
/deep/ .input-height .el-date-editor.el-input {
  height: 32px;
}
.margin-right-lg {
  margin-right: 32px;
}
.cursor {
  cursor: pointer;
}
.flex-end {
  margin-left: auto;
}
.active {
  position: relative;
}
.active::before {
  content: "";
  display: block;
  width: 50px;
  height: 2px;
  border-radius: 2px;
  background: var(--el-color-primary);
  position: absolute;
  bottom: 3px;
  left: 50%;
  transform: translateX(-50%);
}

.align-center{
  display: flex;
  align-items: center;
}
</style>